<template>
  <template v-if="data">
    <div class="position-apply">
      <div>
        <div ref="pcScrollRef" class="card-list yindu-scrollbar">
          <div
            class="position-card pointer"
            :class="activeIndex == index ? 'active' : ''"
            v-for="(item, index) in data"
            :key="item.id"
            @click="activeIndex = index"
          >
            <div class="position-card-header">
              <div class="row">
                <div class="title">{{ item.title }}</div>
                <div class="salary">{{ item.salary }}</div>
              </div>
              <div class="tags">
                <span
                  v-for="(item2, index) in item.air_title.split(' ')"
                  :key="index"
                >
                  {{ item2 }}
                </span>
              </div>
            </div>
            <div class="position-card-footer">
              <div class="area">
                <IconAddress fill="#70818C"></IconAddress>
                <span>{{ $t("tag.area") }}：{{ item.City.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="min-width: 1px" class="flex-1">
        <div
          ref="rightContentRef"
          class="position-card card-detail"
          v-if="data[activeIndex]"
        >
          <div class="position-card-header">
            <div class="left">
              <div class="header-row">
                <div class="title">{{ data[activeIndex].title }}</div>
                <div class="details">
                  <div class="salary">{{ data[activeIndex].salary }}</div>
                  <div class="area">
                    <div class="inner">
                      <IconAddress fill="#70818C"></IconAddress>
                      <span>
                        {{ $t("tag.area") }}：{{ data[activeIndex].City.title }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tags">
                <span
                  v-for="(item2, index) in data[activeIndex].air_title.split(
                    ' '
                  )"
                  :key="index"
                >
                  {{ item2 }}
                </span>
              </div>
            </div>
            <div>
              <a-button type="primary" @click="consult_btn">
                <template #icon>
                  <IconConsult fill="#FFFFFF"></IconConsult>
                </template>
                {{ $t("btnText.imed_consult") }}
              </a-button>
            </div>
          </div>
          <div class="card-detail-content">
            <div
              style="font-size: unset"
              class="descri raw-html"
              v-html="data[activeIndex].content"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div ref="mobileScrollRef" class="position-apply-mobile">
      <div
        class="position-apply-mobile-item"
        v-for="(item, index) in data"
        :key="index"
        @click="showDetail(item)"
      >
        <div class="position-apply-mobile-item-header-container">
          <div class="position-apply-mobile-item-header">
            <div class="row">
              <div class="title">
                <span>{{ item.title }}</span>
              </div>
              <div class="salary">
                <span>{{ item.salary }}</span>
              </div>
            </div>
            <div class="tags">
              <span
                v-for="(item2, index) in item.air_title.split(' ')"
                :key="index"
              >
                {{ item2 }}
              </span>
            </div>
          </div>
        </div>
        <div class="position-apply-mobile-item-footer">
          <IconAddress fill="#70818C" />
          <span>{{ item.City.title }}</span>
        </div>
      </div>
      <Drawer
        :titleVisible="false"
        v-model:visible="detailVisible"
        bottomPadding="3.1771vw 4.2708vw"
        highHeight
      >
        <template #closeIcon>
          <IconCircleClose class="closeIcon"></IconCircleClose>
        </template>
        <template #header>
          <div
            class="position-apply-mobile-drawer-header-container"
            v-if="currentDetail"
          >
            <div class="position-apply-mobile-drawer-header">
              <div class="row">
                <div class="title">
                  <span>{{ currentDetail.title }}</span>
                </div>
                <div class="salary">
                  <span>{{ currentDetail.salary }}</span>
                </div>
              </div>
              <div class="tags">
                <span
                  v-for="(item2, index) in currentDetail.air_title.split(' ')"
                  :key="index"
                >
                  {{ item2 }}
                </span>
              </div>
            </div>
            <div class="divider-line"></div>
          </div>
        </template>
        <template #default>
          <div v-if="currentDetail" class="raw-html">
            <div
              class="position-apply-mobile-drawer-details"
              v-html="currentDetail.content"
            ></div>
          </div>
        </template>
        <template #footer>
          <a-button
            class="drawer-button"
            @click.stop="consult_btn"
            type="primary"
          >
            <template #icon>
              <IconConsult fill="#FFFFFF"></IconConsult>
            </template>
            {{ $t("btnText.imed_consult") }}
          </a-button>
        </template>
      </Drawer>
    </div>
  </template>
  <template v-else>
    <div class="pc-skeleton">
      <div class="position-apply skeleton">
        <div class="card-list">
          <div class="position-card" v-for="i in 4" :key="i">
            <div class="position-card-header">
              <Skeleton :rows="2"></Skeleton>
            </div>
            <div class="position-card-footer">
              <Skeleton pc block></Skeleton>
            </div>
          </div>
        </div>
        <div class="position-card card-detail" style="flex: 1">
          <div class="position-card-header">
            <Skeleton :rows="2" style="flex: 1"></Skeleton>
          </div>
          <div class="card-detail-content">
            <Skeleton :rows="4"></Skeleton>
          </div>
        </div>
      </div>
    </div>
    <div class="mobile-skeleton">
      <div class="position-apply-mobile">
        <div class="position-apply-mobile-item" v-for="i in 6" :key="i">
          <div class="position-apply-mobile-item-header-container">
            <div class="position-apply-mobile-item-header">
              <Skeleton mobile :rows="2"></Skeleton>
            </div>
          </div>
          <div class="position-apply-mobile-item-footer">
            <Skeleton mobile width="40%"></Skeleton>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
type Props = {
  data: any[];
};

const props = defineProps<Props>();

const activeIndex = ref(0);

const detailVisible = ref(false);
const currentDetail = ref();
const showDetail = (item) => {
  detailVisible.value = true;
  currentDetail.value = item;
};

const rightContentRef = ref();
const calcCardListHeight = () => {
  if (pcScrollRef.value && rightContentRef.value) {
    setTimeout(() => {
      nextTick(() => {
        let height = (rightContentRef.value as HTMLElement).offsetHeight;
        if (height > window.innerHeight) {
          height = window.innerHeight;
        }
        if (height < 500) {
          height = 500;
        }
        (pcScrollRef.value as HTMLElement).style.maxHeight = height + "px";
      });
    });
  }
};

watch(activeIndex, (n) => {
  calcCardListHeight();
});

watch(
  () => props.data,
  () => {
    setTimeout(() => {
      calcCardListHeight();
    }, 100);
    if (route.query.id) {
      let _index = -1;
      props.data.forEach((item, index) => {
        if (item.id == route.query.id) {
          _index = index;
        }
      });
      if (_index !== -1) {
        activeIndex.value = _index;
        nextTick(() => {
          scrollMoveToActiveBox(_index);
        });
      }
    }
  }
);

const pcScrollRef = ref();
const mobileScrollRef = ref();
const scrollMoveToActiveBox = (index: number) => {
  if (isMobile()) {
    const scrollContainer = mobileScrollRef.value;
    if (scrollContainer) {
      const target = document.querySelectorAll(".position-apply-mobile-item")[
        index
      ];
      if (target) {
        window.scrollTo({
          top: target.offsetTop,
          behavior: "smooth",
        });
      }
    }
  } else {
    const scrollContainer = pcScrollRef.value;
    if (scrollContainer) {
      const target = scrollContainer.querySelectorAll(".position-card")[index];
      if (target) {
        scrollContainer.scrollTo({
          top:
            target.offsetTop -
            scrollContainer.offsetTop +
            scrollContainer.clientTop,
          behavior: "smooth",
        });
      }
    }
  }
};

const emits = defineEmits(["consult"]);

const consult_btn = () => {
  if (!isMobile()) {
    currentDetail.value = props.data[activeIndex.value];
  }
  emits("consult", currentDetail.value);
};
</script>
<style scoped lang="less">
.position-apply {
  margin-bottom: 40px;
  display: flex;
  gap: 24px;
  &.skeleton {
    .card-list {
      overflow: hidden;
    }
    .position-card {
      overflow: visible;
    }
  }
  .position-card {
    border: 1px solid #cfd2cc;
    border-radius: 20px;
    overflow: hidden;
    font-size: 20px;
    color: #323232;
    background-color: #fff;
    &.active {
      border-color: var(--yd-primary-color);
    }
    .title {
      font-weight: 600;
    }
    .salary {
      font-weight: 600;
      color: #fe574a;
      font-size: 16px;
      white-space: nowrap;
    }
    .tags {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 16px;
      span {
        padding: 5px 8px;
        background: #f5f5f5;
        border-radius: 4px;
      }
    }
    .area {
      color: #70818c;
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 16px;
    }
    .position-card-header {
      padding: 24px;
      border-bottom: 1px solid #ccd6de;
      .row {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .card-list {
    display: grid;
    grid-template-rows: auto;
    gap: 24px;
    max-height: 700px;
    padding-right: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    .position-card {
      width: 344px;
      .position-card-footer {
        padding: 16px 24px;
      }
    }
  }
  .card-detail {
    flex: 1;
    .position-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      .left {
        flex: 1;
      }
      .header-row {
        display: flex;
        gap: 16px;
        & > div {
          flex: 2;
        }
        .details {
          flex: 0 1 auto;
          gap: 16px;
          & > div {
            display: inline-block;
            &:first-child {
              margin-right: 16px;
            }
            .inner {
              display: flex;
              gap: 8px;
              align-items: center;
            }
          }
        }
      }
      :deep(.ant-btn) {
        border-radius: 4px !important;
        gap: 8px;
        align-items: center;
        padding: 13px 24px !important;
      }
    }
    .card-detail-content {
      padding: 24px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
      }
      .descri {
        font-size: 16px;
        color: #323232;
      }
    }
  }
}
.position-apply-mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .position-apply {
    display: none;
  }

  .position-apply-mobile {
    padding: 61px 0;
    display: flex;
    flex-direction: column;
    gap: 61px;
    font-size: 72px;
    .position-apply-mobile-item {
      border: 1px solid #cfd2cc;
      border-radius: 51px;
      overflow: hidden;
      background-color: #fff;
      .position-apply-mobile-item-header-container {
        padding: 61px;
      }
      .position-apply-mobile-item-header {
        color: #323232;
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 61px;
          .salary {
            font-size: 61px;
            color: #fe574a;
          }
        }
        .tags {
          font-size: 61px;
          display: flex;
          flex-wrap: wrap;
          gap: 61px;
          span {
            padding: 20px 41px;
            background: #f5f5f5;
            border-radius: 10px;
          }
        }
      }
      .position-apply-mobile-item-footer {
        padding: 61px;
        font-size: 61px;
        border-top: 1px solid #d3dce3;
        display: flex;
        align-items: center;
        gap: 41px;
        color: #70818c;
      }
    }

    :deep(.drawer-button) {
      font-size: 72px !important;
      color: #3d88f2;
      width: 100%;
      gap: 41px;
      border-radius: 20px !important;
    }

    .position-apply-mobile-drawer-header-container {
      .divider-line {
        margin-bottom: 0;
      }
    }
    .position-apply-mobile-drawer-header {
      padding-top: 200px;
      color: #323232;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 61px;
        .title {
          font-weight: 600;
          font-size: 102px;
          text-align: left;
        }
        .salary {
          font-size: 72px;
          color: #fe574a;
        }
      }
      .tags {
        font-size: 61px;
        display: flex;
        flex-wrap: wrap;
        gap: 61px;
        span {
          padding: 20px 41px;
          background: #f5f5f5;
          border-radius: 10px;
        }
      }
    }
    .position-apply-mobile-drawer-details {
      padding-bottom: 82px;
    }
  }

  :deep(.closeIcon) {
    width: 102px;
    height: 102px;
  }
}
</style>
